<!-- 继承模板 -->
@extends('Admin/Layout/base')

<!-- 标题设置 -->
@section('title', '编辑博客')

@section('style')
    <!-- 加载ueditor -->
    @include('vendor.ueditor.assets')
@endsection

@section('content')



<div class="row-content am-cf">

    <div class="row">

        <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
            <div class="widget am-cf">
                <div class="widget-head am-cf">
                    <div class="widget-title am-fl">编辑博客</div>
                    <div class="widget-function am-fr">
                        {{-- <a href="javascript:;" class="am-icon-cog"></a> --}}
                    </div>
                </div>
                
                <div class="widget-body am-fr">
                       
                    <form class="am-form tpl-form-line-form" action="{{url('admin/article-update')}}" method="post" enctype="multipart/form-data">
                        
                        <input type="hidden" name="id" value="{{$article['id']}}">
                        <input type="hidden" name="content" value="">

                        {{ csrf_field() }}

                        <div class="am-form-group">
                            <label for="user-phone" class="am-u-sm-3 am-form-label">文章分类 <span class="tpl-form-line-small-title">Category</span></label>
                            <div class="am-u-sm-9">
                                <select data-am-selected="{searchBox: 1}" style="display: none;" name="category">
                                    
                                    @foreach($categoriesList as $cate)
                                        @if ($cate['id'] == $article['category_id'])
                                            <option value="{{$cate['id']}}" selected>{{$cate['name']}}</option>
                                        @else
                                            <option value="{{$cate['id']}}">{{$cate['name']}}</option>
                                        @endif
                                    @endforeach

                                </select>
                                <small style="color: red; font-weight: bold;"></small>
                            </div>
                        </div>

                        <div class="am-form-group">
                            <label for="user-name" class="am-u-sm-3 am-form-label">文章标签 <span class="tpl-form-line-small-title">Tags</span></label>
                            <div class="am-u-sm-9">

                                @foreach($tagsList as $tag)
                                    @if (in_array($tag['id'], $ownTagsID))
                                        <label class="am-checkbox-inline">
                                            <input type="checkbox" name="tags[]" value="{{$tag['id']}}" data-am-ucheck checked> {{$tag['name']}}
                                        </label>
                                    @else
                                        <label class="am-checkbox-inline">
                                            <input type="checkbox" name="tags[]" value="{{$tag['id']}}" data-am-ucheck> {{$tag['name']}}
                                        </label>
                                    @endif

                                @endforeach
                                <small style="color: red; font-weight: bold;" name="tagswrongtips"></small>
                            </div>
                        </div>

                        <div class="am-form-group">
                            <label for="user-name" class="am-u-sm-3 am-form-label">标题 <span class="tpl-form-line-small-title">Title</span></label>
                            <div class="am-u-sm-9">
                                <input type="text" class="tpl-form-input" id="user-name" name="title" placeholder="请输入标题文字" value="{{$article['title']}}">
                                <small>请填写标题，限定1-100个字符。</small>
                            </div>
                        </div>

                        <div class="am-form-group">
                            <label for="user-name" class="am-u-sm-3 am-form-label">作者 <span class="tpl-form-line-small-title">Author</span></label>
                            <div class="am-u-sm-9">
                                <input type="text" class="tpl-form-input" id="author" name="author" placeholder="请输入作者名称" value="{{$article['author']}}">
                                <small>请填写作者，限定1-15个字符。</small>
                            </div>
                        </div>


                        <div class="am-form-group">
                            <label class="am-u-sm-3 am-form-label">SEO关键字 <span class="tpl-form-line-small-title">SEO</span></label>
                            <div class="am-u-sm-9">
                                <input type="text" placeholder="输入SEO关键字" name="keywords" value="{{$article['keywords']}}">
                                <small>关键字之间用空格分开，限10个关键字</small>
                            </div>
                        </div>

                        <div class="am-form-group">
                            <label for="user-weibo" class="am-u-sm-3 am-form-label">封面图 <span class="tpl-form-line-small-title">Images</span></label>
                            <div class="am-u-sm-9">
                                <div class="am-form-group am-form-file">

                                    <div class="tpl-form-file-img">
                                        <img id="show" src="{{$article['cover']}}" alt="" width="150" >
                                    </div>
                                    <button type="button" class="am-btn am-btn-danger am-btn-sm">
                                        <i class="am-icon-cloud-upload"></i> 添加封面图片</button>
                                    <input id="doc-form-file" type="file" multiple="" name="cover" onchange="c()">

                                </div>

                            </div>
                        </div>

                        <div class="am-form-group">
                            <label for="user-intro" class="am-u-sm-3 am-form-label">是否顶置</label>
                            <div class="am-u-sm-9">

                                <label class="am-radio-inline">
                                  <input type="radio" name="is_top" value="1" data-am-ucheck  @php $article['is_top'] == 1 ? 'checked' : '' @endphp>
                                  顶置
                                </label>

                                <label class="am-radio-inline">
                                  <input type="radio" name="is_top" value="0" data-am-ucheck checked="true" @php $article['is_top'] == 0 ? 'checked' : '' @endphp>
                                  不顶置
                                </label>

                            </div>
                        </div>

                        <div class="am-form-group">
                            <label for="user-intro" class="am-u-sm-3 am-form-label">是否显示</label>
                            <div class="am-u-sm-9">

                                <label class="am-radio-inline">
                                  <input type="radio" name="display" value="1" data-am-ucheck checked="true" @php $article['display'] == 1 ? 'checked' : '' @endphp>
                                  显示
                                </label>

                                <label class="am-radio-inline">
                                  <input type="radio" name="display" value="0" data-am-ucheck @php $article['display'] == 0 ? 'checked' : '' @endphp>
                                  不显示
                                </label>

                            </div>
                        </div>

                        <div class="am-form-group">
                            <label for="user-intro" class="am-u-sm-3 am-form-label">文章描述</label>
                            <div class="am-u-sm-9">
                                <textarea class="" rows="7" id="user-intro" placeholder="请输入文章描述，限255个字符" name="description">{{$article['description']}}</textarea>
                            </div>
                        </div>
                        
                        <div class="am-form-group">
                            <label for="user-intro" class="am-u-sm-3 am-form-label">文章内容</label>
                        </div>

                        <div class="am-form-group">
                            <div class="am-u-sm-7 am-u-sm-centered">
                                
                                <!-- 实例化编辑器 -->
                                <script type="text/javascript">
                                    var ue = UE.getEditor('container', {

                                        initialFrameHeight : 350    //编辑器高度
                                    });

                                    ue.ready(function() {
                                        ue.execCommand('serverparam', '_token', '{{ csrf_token() }}'); // 设置 CSRF token.

                                        //把文章的内容填进去编辑器                              
                                        // ue.execCommand('inserthtml', '{! !$article['html']!!}'); //注意 使用 {! ! !!}的语法, 但这里注销的原因是,加载页面,编辑器会自动获取焦点, 用户体验不好,所以直接在下面添加内容

                                    });

                                    
                                </script>

                                <!-- 编辑器容器 -->
                                <script id="container" name="html" type="text/plain">{!!$article['html']!!}</script>

    
                            </div>
                        </div>

                        {{-- 按钮 --}}
                        <div class="am-form-group">
                            <div class="am-u-sm-9 am-u-sm-push-3">
                                <button name="submit" type="submit" class="am-btn am-btn-primary tpl-btn-bg-color-success " onclick="return checkRequest()">提交</button>
                                <button type="button" class="am-btn am-btn-primary tpl-btn-bg-color-success " onclick="history.back()">返回</button>
                            </div>
                        </div>
                        
                    </form>

                </div>
            </div>
        </div>
    </div>

</div>



@endsection


@section('footer-js')
   
<script type="text/javascript">

    function c () {
        var r= new FileReader();

        f=document.getElementById('doc-form-file').files[0];

        r.readAsDataURL(f);

        r.onload=function  (e) {
            document.getElementById('show').src=this.result;
        };
    }


    //验证必填(必选)项目是否已填上或者选上
    function checkRequest() {

        //清除原来的错误信息
        $('select[name="category"]').siblings('small').html('');
        $('small[name="tagswrongtips"]').html('');
        $('small[name="titlewrongtips"]').html('');
        $('small[name="authorwrongtips"]').html('');

        // console.log($.trim($('input[name="title"]').val()).length);
        // return false;

        if (!($('option').is(':checked'))) {
            $('select[name="category"]').siblings('small').html('请选择分类');
            return false;
        }

        if ($('input[type="checkbox"]').is(':checked') == false) {
            $('small[name="tagswrongtips"]').html('请选择至少一个标签');
            return false;
        }

        if ($.trim($('input[name="title"]').val()) == '') {
            $('input[name="title"]').parent().append('<small style="color: red; font-weight: bold;" name="titlewrongtips">请填写标题</small>');
            return false;
        } else if ($.trim($('input[name="title"]').val()).length > 100) {
            $('input[name="title"]').parent().append('<small style="color: red; font-weight: bold;" name="titlewrongtips">标题不能超过100个字符</small>');
            return false;
        }

        if ($.trim($('input[name="author"').val()) == '') {
            $('input[name="author"]').parent().append('<small style="color: red; font-weight: bold;" name="authorwrongtips">请填写作者</small>');
            return false;
        } else if ($.trim($('input[name="author"]').val()).length > 15) {
            $('input[name="author"]').parent().append('<small style="color: red; font-weight: bold;" name="authorwrongtips">作者名称不能超过15个字符</small>');
            return false;
        }

        //获取文章内容的纯文本,并且放在input标签中
        $('input[name="content"]').val(ue.getContentTxt());
        return true;
    }

</script>

@endsection